<template>
	<view class="page">
		<view class="top-bar">
			<!--<navigator open-type="navigateBack" class="back"><text class="cuIcon-back_android icon"></text></navigator>-->
			<view class="search" @click="onSearch">
				<text class="cuIcon-search icon"></text>
				<input type="text" placeholder="热搜" class="text">
			</view>
		</view>
		
		<!--<view class="shop-info">
			<image class="image" :src="shopInfo.shopLogo" mode="aspectFill"></image>
			<view class="info">
				<view class="title">
					<text class="name">{{ shopInfo.shopName }}</text>
					<text class="type">{{ shopInfo.shopTypeName }}</text>
					<text class="mode">{{ shopInfo.modeName }}</text>
				</view>
				<view class="address"><text class="cuIcon-location icon"></text>{{ shopInfo.returnAddress }}</view>
			</view>
		</view>-->
		
		<!--<view class="shop-desc">
			<text class="cuIcon-safe icon"></text>
			<text class="text">{{ shopInfo.shopDesc }}</text>
		</view>-->

		<view class="main">
			<!-- banner -->
			<view class="banner">
				<swiper class="screen-swiper square-dot" indicator-dots="true" circular="true" autoplay="true"
					interval="5000" duration="500">
					<swiper-item v-for="(item,index) in swiperList" :key="index">
						<image :src="item.imgUrl" mode="aspectFill" @click="_toPageUrl(item.pageUrl)"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- 菜单导航 -->
			<view v-if="categoryList && categoryList.length>0">
				<vc-category :category-list="categoryList"></vc-category>
			</view>
			
			<view style="height: 20rpx; background: #F5F5F5;"></view>
			
			<!-- 通知 -->
			<!-- <view class="inform">
				<text class="cuIcon-notice icon"></text>
				<view class="info">
					<swiper class="swiper" :circular="true" :vertical="true" :indicator-dots="false"
						:autoplay="true" :interval="3000" :duration="1000">
						<swiper-item v-for="(item,index) in storeMsgs" :key="index">
							<view class="swiper-item" @click="_toPageUrl(item.pageUrl)">
								<text class="one-omit">{{item.title}}</text>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view> -->
			
			<view>
				<seckill-view ref="seckillViewRef"></seckill-view>
			</view>
			<view>
				<group-view ref="groupViewRef"></group-view>
			</view>
			
			<!-- 为你推荐 -->
			<view class="recommend-info">
				<view class="title">为你推荐</view>
				<view class="list" v-if="goodsList && goodsList.length>0">
					<view class="li" v-for="(item,index) in goodsList" @click="onSkip('goods',item)" :key="index">
						<image class="pictrue" :src="item.coverPhoto" mode="heightFix"></image>
						<view class="title-tag">
							<view class="tag">
								<text v-if="item.is_goods === 1">特价</text>
								{{item.prodName}}
							</view>
						</view>
						<view class="price-info">
							<view class="user-price">
								<text class="min">￥</text>
								<text class="max">{{item.price}}</text>
							</view>
							<view class="vip-price">
								<image class="pic" :src="conf.commonBaseUrl+'h5/static/vip_ico.png'"></image>
								<text>￥{{item.defaultSpecValue.vipPrice}}</text>
							</view>
						</view>
					</view>

				</view>
				<view v-else>
					<no-data-page></no-data-page>
				</view>
			</view>
		</view>
		<view style="height: 100rpx;"></view>
		<shop-tab-bar tabBarShow="0"></shop-tab-bar>
	</view>
</template>

<script>
	import ShopTabBar from '@/components/TabBar/ShopTabBar.vue';
	import ClassifyData from '@/components/ClassifyData/ClassifyData.vue';
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue';
	import groupView from '@/components/index/group-view.vue';
	import seckillView from '@/components/index/seckill-view.vue';

	import {
		queryShopMenu,
		queryProductLabel,
		queryStoreMsg,
		queryStoreAds
	} from '@/api/index/indexApi.js'

	import vcCategory from '@/components/vc-category/vc-category.vue';
	import noDataPage from '@/components/no-data-page/no-data-page.vue'

	import {
		getShopId,
		getShops
	} from '@/api/shop/shopApi.js'
	// import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue"
	import param from '../../constant/param.js'
	import {
		sliceArray
	} from '../../lib/java110/utils/ArrayUtil.js';
	import conf from '@/conf/config.js';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			ShopTabBar,
			ClassifyData,
			vcCategory,
			MescrollBody,
			noDataPage,
			groupView,
			seckillView
		},
		data() {
			return {
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					use: false
				},
				swiperList: [],
				slideNum: 0,
				categoryList: [],
				goodsList: [],
				storeMsgs: [],
				classifyShow: 0,
				// 页面高度
				pageHeight: 500,
				conf: {},
				shopInfo: {}
			}
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: '首页',
			})
			// #ifdef MP
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#fe3b0f',
			})
			// #endif

			//todo 设置图片
		},
		async onLoad(options) {
			let _that = this;
			this.conf = conf;
			uni.setStorageSync("ShopIndex", "ON");
			await this.vc.onLoad(options).then(_suc => {}, _err => {});
			this._getCategoryList();
			this._queryProductLabel();
			this._queryStoreMsg();
			this._queryStoreAds();
			this._freshShopName();
			let _shopId = getShopId();
			setTimeout(function() {
				_that.$refs.seckillViewRef.initSeckill(_shopId);
				_that.$refs.groupViewRef.initGroup(_shopId);
			}, 1000);

		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop;
			if (scrollTop > 0) {
				this.pageHeight = 210;
			} else {
				this.pageHeight = 500;
			}
		},
		onReachBottom() {},
		methods: {
			_freshShopName: function() {
				let _shopId = getShopId();
				if (_shopId) {
					getShops({
						shopId: _shopId,
						page: 1,
						row: 1
					}).then(_data => {
						this.shopInfo = _data[0];
						uni.setNavigationBarTitle({
							title: _data[0].shopName,
						})
					})
				}
			},

			/**
			 * 菜单导航滚动
			 */
			ScrollMenu(e) {
				let scrollLeft = e.target.scrollLeft;
				const query = uni.createSelectorQuery().in(this);
				query.select('.nav').boundingClientRect(data => {
					let wid = e.target.scrollWidth - data.width - (data.left * 2 + 5);
					this.slideNum = (scrollLeft / wid * 300) / 2;
				}).exec();
			},
			/**
			 * 搜索点击
			 */
			onSearch() {
				uni.navigateTo({
					url: '/pages/goods/HM-search?searchType=5'
				})
			},
			_getCategoryList() {
				let _that = this
				let params = {
					page: 1,
					row: 100,
					isShow: "Y",
					shopId: getShopId(),
				}
				queryShopMenu(params)
					.then(function(result) {
						let categoryData = result.data
						categoryData.forEach(_data => {
							_data.hktIcon = _data.menuIcon;
							_data.hktName = _data.name;
							_data.url = _data.pageUrl;
						})
						_that.categoryList = sliceArray(categoryData, 8)
					});
			},
			_queryProductLabel() {
				let _that = this
				let params = {
					page: 1,
					row: 100,
					labelCd: "942021080038360001",
					shopId: getShopId()
				}
				queryProductLabel(params)
					.then(function(result) {
						let products = result.data
						_that.goodsList = products
					})
			},
			_queryStoreMsg() {
				let _that = this
				let params = {
					page: 1,
					row: 5,
					shopId: getShopId()
				}
				queryStoreMsg(params)
					.then(function(result) {
						let products = result.data
						_that.storeMsgs = products
					}).then(() => {
						if (!_that.storeMsgs || _that.storeMsgs.length < 1) {
							_that.storeMsgs = [{
								title: '暂无通知'
							}]
						}
					})
			},
			_queryStoreAds() {
				let _that = this
				let params = {
					page: 1,
					row: 5,
					shopId: getShopId()
				}
				queryStoreAds(params)
					.then(function(result) {
						let products = result.data
						_that.swiperList = products
					}).then(() => {
						if (!_that.swiperList || _that.swiperList.length < 1) {
							_that.swiperList = [{
								imgUrl: conf.commonBaseUrl + 'h5/static/images/banner1.jpg'
							}]
						}
					});
			},
			_toPageUrl: function(_url) {
				if (!_url) {
					return;
				}
				_url = encodeURIComponent(_url);

				uni.navigateTo({
					url: '/pages/hcWebView/hcWebView?url=' + _url
				})
			},

			/**
			 * 跳转点击
			 * @param {String} type 跳转类型
			 */
			onSkip(type, item) {
				switch (type) {
					case 'mess':
						uni.navigateTo({
							url: '/pages/Message/Message'
						})
						break;
					case 'paycode':
						uni.navigateTo({
							url: '/pages/PaymentCode/PaymentCode'
						})
						break;
					case 'menu':
						uni.navigateTo({
							url: '/pages/SearchGoodsList/SearchGoodsList'
						})
						break;
					case 'inform':
						if (item.msgFlag == 'IU') {
							uni.navigateTo({
								url: item.content
							})
							return;
						}
						break;
					case 'flash':
						uni.navigateTo({
							url: '/pages/FlashSale/FlashSale'
						})
						break;
					case 'GoodChoice':
						uni.navigateTo({
							url: '/pages/GoodChoice/GoodChoice'
						})
						break;
					case 'goods':
						uni.navigateTo({
							url: '/pages/goods/goods?productId=' + item.productId + '&shopId=' + item.shopId,
							animationType: 'zoom-fade-out',
							animationDuration: 200
						})
						break;
				}
			}
		}
	};
</script>

<style lang="less" scoped>
	page {
		background: #FFF;
	}
	.top-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.back {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 64rpx;
			height: 88rpx;
			font-size: 36rpx;
		}
		.search {
			display: flex;
			align-items: center;
			flex: 1;
			height: 64rpx;
			font-size: 24rpx;
			padding-left: 20rpx;
			margin: 12rpx 15rpx;
			border-radius: 32rpx;
			background: #F5F5F5;
			.icon {
				display: flex;
				align-items: center;
				margin-right: 10rpx;
			}
			.text {
				font-size: 26rpx;
			}
		}
	}
		
	.shop-info {
		display: flex;
		align-items: center;
		margin: 25rpx;
		.image {
			overflow: hidden;
			width: 60rpx;
			height: 60rpx;
			margin-right: 25rpx;
			border-radius: 30rpx;
			background: #F5F5F5;
		}
		.info {
			flex: 1;
			.title {
				position: relative;
				display: flex;
				flex: 1;
				align-items: center;
				.name {
					font-weight: 700;
				}
				.type {
					color: #FFF;
					font-size: 20rpx;
					font-weight: normal;
					padding: 0 10rpx;
					margin-left: 10rpx;
					border-radius: 5rpx;
					background: #FA5151;
				}
				.mode {
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					color: #909399;
					font-size: 24rpx;
					padding: 0 10rpx;
					border: 1rpx solid #EEE;
					border-radius: 10rpx;
					background: #F5F5F5;
				}
			}
			.address {
				color: #909399;
				font-size: 24rpx;
				margin-top: 8rpx;
				.icon {
					margin-right: 5rpx;
				}
			}
		}
	}
	
	.shop-desc {
		display: flex;
		align-items: center;
		color: #EFE1C4;
		font-size: 24rpx;
		padding: 15rpx 25rpx;
		background: #141D2C;
		.icon {
			margin-right: 10rpx;
		}
	}
	
	.inform {
		display: flex;
		align-items: center;
		padding: 25rpx;
		background: #F5F5F5;
		.icon {
			margin-right: 15rpx;
		}
		.info {
			flex: 1;
			.swiper {
				height: 40rpx;
			}
		}
	}
	
	.recommend-info {
		.title {
			display: flex;
			align-items: center;
			color: #141D2C;
			padding: 25rpx;
			&::before {
				content: '';
				display: flex;
				height: 30rpx;
				margin-right: 15rpx;
				border-left: 5rpx solid #141D2C;
			}
		}
		.list {
			display: flex;
			flex-wrap: wrap;
			padding: 0 12rpx;
			.li {
				width: 50%;
				padding: 0 12rpx;
				box-sizing: border-box;
				margin-bottom:35rpx;
				.pictrue {
					overflow: hidden;
					width: 100%;
					height: 320rpx;
					border-radius: 20rpx 20rpx 0 0;
				}
				.tag {
					overflow: hidden;           /* 隐藏超出容器的文本 */
					width: 320rpx;
					white-space: nowrap;        /* 禁止文本换行 */
					text-overflow: ellipsis;    /* 使用省略号表示溢出的文本 */
					margin-top: 10rpx;
				}
				.price-info {
					display: flex;
					align-items: baseline;
					justify-content: space-between;
					margin-top: 10rpx;
				}
				.user-price {
					color: #FA5151;
					.min {
						font-size: 20rpx;
					}
					.max {
						font-size: 32rpx;
					}
				}
				.vip-price {
					display: flex;
					align-items: center;
					color: #FCB735;
					font-size: 24rpx;
					.pic {
						width: 28rpx;
						height: 28rpx;
						margin-right: 5rpx;
					}
				}
			}
		}
	}
	
</style>